import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, DatePicker, message, Row, Col } from 'antd';
import { useRequest } from '@umijs/hooks';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import styles from './style.less';
import router from 'umi/router';

const PassengerInfo = props => {
  const { form } = props;

  // 表单格式
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const ownerType = 0;

  const formatFlightNo = val => {
    if (!val) {
      return '';
    } else if (val.length < 3 || /^\D/.test(val)) {
      return ''.toUpperCase.call(val);
    } else if (/^\d{2}/.test(val)) {
      return `3U${val}`;
    } else {
      return val;
    }
  };

  // 证件号规则
  const idNumberValidator = (rule, value, callback) => {
    if (value && (value.length !== 18 || !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value))) {
      callback("请输入正确的证件号");
    }
    callback();
  }

  // 客票号规则
  const ticketNumberValidator = (rule, value, callback) => {
    if (value && value.length !== 13) {
      callback("请输入正确的客票号");
    }
    callback();
  }

  // 行李号规则
  const luggageNumberValidator = (rule, value, callback) => {
    if (value && value.length !== 6 && value.length !== 8 && value.length !== 10) {
      callback("请输入正确的行李号");
    }
    callback();
  }

  // 航班号规则
  const flightNumberValidator = (rule, value, callback) => {
    if (value && value.length !== 5 && value.length !== 6) {
      callback("请输入正确的航班号");
    }
    callback();
  }

  // 航班日期禁用
  const disabledDate = (current) => {
    return current && current > moment().endOf('day');
  }

  // 确认
  const okHandle = () => {
    if (!form.getFieldsValue().pkgNo && !form.getFieldsValue().tktNo && !form.getFieldsValue().idNo) {
      message.warning('行李牌号/证件号/客票号三者之一必填')
    } else {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        let obj = {
          ...fieldsValue
        }
        if (obj.flightDate && obj.flightDate.isValid()) obj.flightDate = moment(obj.flightDate).format('YYYY-MM-DD');
        router.push({
          pathname: '/banksearchSystem/quickRetrieval',
          state: {
            ownerType,
            searchData: obj
          }
        });
      });
    }
  };


  return (
    <Form
      {...layout}
      name="basic"
      labelAlign='left'
      className={styles.passengerInfo}
    >
      <Row>
        <Col span={12}>
          <Form.Item
            label="航班号"
          >
            {form.getFieldDecorator('flightNo', {
              rules: [
                {
                  validator: flightNumberValidator,
                }
              ],
              getValueFromEvent: (event) => {
                return event.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '')
              }
            })(<Input placeholder='请输入' maxLength={6} onChange={(e) => e.target.value = formatFlightNo(e.target.value)}/>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="航班日期"
          >
            {form.getFieldDecorator('flightDate', {
              rules: [
                {
                  required: true,
                  message: '请选择航班日期'
                },
              ],
              initialValue: moment()
            })(<DatePicker disabledDate={disabledDate} />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="行李号"
          >
            {form.getFieldDecorator('pkgNo', {
              rules: [
                {
                  validator: luggageNumberValidator,
                }
              ],
              getValueFromEvent: (event) => {
                return event.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '')
              }
            })(<Input placeholder='请输入' maxLength={10} />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="证件号"
          >
            {form.getFieldDecorator('idNo', {
              rules: [
                {
                  validator: idNumberValidator,
                }
              ],
            })(<Input placeholder='请输入' maxLength={18} />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="客票号"
          >
            {form.getFieldDecorator('tktNo', {
              rules: [
                {
                  validator: ticketNumberValidator,
                }
              ],
              getValueFromEvent: (event) => {
                return event.target.value.replace(/[^0-9]/g, '')
              }
            })(<Input placeholder='请输入' maxLength={13} />)}
          </Form.Item>
        </Col>
      </Row>
      <Form.Item>
        <Button type="primary" onClick={() => okHandle()}>
          旅客信息快速检索
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Form.create()(PassengerInfo);
